<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {    margin: 0;padding: 0;}
        html,body {    width: 100%;height: 100%;}
        #box { width: 100%; height: 100%; overflow: hidden; }
        .ball { width: 100%; height: 500px; }
        #scroll {
            width: 6px; height: 96%;
            position: fixed; top: 2%; right: 5px;
            border-radius: 3px; background-color: rgba(235, 233, 233, 0.5);
            z-index: 9998; opacity: 100;
        }
        #scrollBar {
            position: absolute; z-index: 9999;
            width: 6px; height: 20px;
            border-radius: 3px;
            left: 0; top: 0; background-color: #383838;
        }
    </style>
</head>

<body style="overflow:hidden;">
    <div id="box">
        <div id="content">
            <p class="ball" style="background-color:red;"></p>
            <p class="ball" style="background-color:blue;"></p>
            <p class="ball" style="background-color:yellow;"></p>
            <p class="ball" style="background-color:red;"></p>
            <p class="ball" style="background-color:blue;"></p>
            <p class="ball" style="background-color:yellow;"></p>
        </div>
    </div>
    <div id="scroll">
        <div id="scrollBar"></div>
    </div>
</body>

</html>
<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var content = document.getElementById("content");
    var box = document.getElementById("box");
    var scroll = document.getElementById("scroll");
    var scrollBar = document.getElementById("scrollBar");
   	
// 	window.innerHeight/content.offsetHeight = ???/scroll.offsetHeight;
   	scrollBar.style.height = scroll.offsetHeight*window.innerHeight/content.offsetHeight + "px";
   	var scale = box.offsetHeight/scrollBar.offsetHeight;
   	
	addEvent(box,"mousewheel", function(e){
		var e = e || event;
		console.log("mousewheel");
		
		console.log(e.wheelDelta);  // -120  向下    120 向上
		console.log(e.detail);      // undefined
		
		if(e.wheelDelta < 0) {
			box.scrollTop += 20;
		} else {
			box.scrollTop -= 20;
		}
		
		scrollBar.style.top = box.scrollTop/scale + "px";
	});
	addEvent(box,"DOMMouseScroll", function(e){
		var e = e || event;
		console.log("DOMMouseScroll");
		
		console.log(e.wheelDelta);  // undefined
		console.log(e.detail);      // 3  向下   -3 向上
		
		if(e.detail > 0) {
			box.scrollTop += 20;
		} else {
			box.scrollTop -= 20;
		}
	})
  
</script>
